import React, { useState, useEffect } from "react";
import { Card, Radio, Pagination, Spin, Empty } from "antd";
import { FireOutlined } from "@ant-design/icons";
import "./index.css";

interface PaperItem {
    id: string;
    title: string;
    description: string;
    heat: number;
    createTime: string;
}

interface PaperEndProps {
    onStartPractice: (paperId: string) => void;
}

const PaperEnd: React.FC<PaperEndProps> = ({ onStartPractice }) => {
    const [loading, setLoading] = useState(false);
    const [paperList, setPaperList] = useState<PaperItem[]>([]);
    const [orderType, setOrderType] = useState("default");
    const [pagination, setPagination] = useState({
        current: 1,
        pageSize: 10,
        total: 0,
    });

    // 模拟获取试卷列表数据
    const fetchPaperList = async () => {
        setLoading(true);
        try {
            // 模拟API请求延迟
            await new Promise((resolve) => setTimeout(resolve, 1000));

            // 模拟数据
            const mockData = {
                list: [
                    {
                        id: "1",
                        title: "Java基础模拟考试",
                        description: "包含Java基础知识点的综合测试",
                        heat: 156,
                        createTime: "2024-03-20",
                    },
                    {
                        id: "2",
                        title: "Spring框架专项练习",
                        description: "Spring核心概念与实战应用",
                        heat: 89,
                        createTime: "2024-03-19",
                    },
                    {
                        id: "3",
                        title: "MySQL数据库优化测试",
                        description: "数据库性能优化与SQL编写",
                        heat: 234,
                        createTime: "2024-03-18",
                    },
                ],
                total: 3,
            };

            setPaperList(mockData.list);
            setPagination((prev) => ({
                ...prev,
                total: mockData.total,
            }));
        } catch (error) {
            console.error("获取试卷列表失败:", error);
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        fetchPaperList();
    }, [orderType, pagination.current]);

    const handleOrderChange = (e: any) => {
        setOrderType(e.target.value);
        setPagination((prev) => ({ ...prev, current: 1 }));
    };

    const handlePageChange = (page: number) => {
        setPagination((prev) => ({ ...prev, current: page }));
    };

    return (
        <div className="paper-end-box">
            <div className="paper-header">
                <h2>模拟考试</h2>
                <Radio.Group value={orderType} onChange={handleOrderChange}>
                    <Radio.Button value="default">默认排序</Radio.Button>
                    <Radio.Button value="latest">最新</Radio.Button>
                    <Radio.Button value="hottest">最热</Radio.Button>
                </Radio.Group>
            </div>

            <Spin spinning={loading}>
                {paperList.length > 0 ? (
                    <div className="paper-list">
                        {paperList.map((paper) => (
                            <Card
                                key={paper.id}
                                className="paper-card"
                                hoverable
                                onClick={() => onStartPractice(paper.id)}
                            >
                                <div className="paper-title">{paper.title}</div>
                                <div className="paper-desc">
                                    {paper.description}
                                </div>
                                <div className="paper-footer">
                                    <span className="paper-time">
                                        {paper.createTime}
                                    </span>
                                    <span className="paper-heat">
                                        <FireOutlined /> {paper.heat}
                                    </span>
                                </div>
                            </Card>
                        ))}
                    </div>
                ) : (
                    <Empty description="暂无试卷" />
                )}
            </Spin>

            <div className="paper-pagination">
                <Pagination
                    current={pagination.current}
                    pageSize={pagination.pageSize}
                    total={pagination.total}
                    onChange={handlePageChange}
                    showQuickJumper
                    showSizeChanger
                />
            </div>
        </div>
    );
};

export default PaperEnd;